<template>
	<view>
		<view style="position: relative;">
			<view>
				<view class="count">{{swiperIndex+1}}/{{imgs.length}}</view>
				<swiper class="swiper" circular :autoplay="swiperAutoPlayState" :interval="3000" :duration="500"
					@change="e => (swiperIndex = e.detail.current)">

					<swiper-item v-for="(item, index) in imgs" :key="index">
						<VideoImg :url="item" :imgVideoStyle="imgVideoStyle"
							@fullscreenchangeHandler="fullscreenchangeHandler"
							@playSwiperVideoEmitHandler="swiperAutoPlayState = false"
							@pauseSwiperVideoEmitHandler="swiperAutoPlayState = true"
							@endedSwiperVideoEmitHandler="swiperAutoPlayState = true" />
					</swiper-item>
				</swiper>
			</view>
		</view>

		<view class="swiperDotBox">
			<view v-for="(item, index) in details.goods_image" class="swiperDot"
				:class="swiperIndex === index && 'curDot'">
			</view>
		</view>
		<view class="cardList">
			<!-- <view style="width: 442rpx; margin: auto">
				<u-divider text="商品详情"></u-divider>
			</view> -->
			<view class="priceBox card">
				<view class="priceBox-price">
					<view style="font-size: 28rpx;font-weight: 700;">
						{{details.name}}
					</view>
					<view style="font-size: 30rpx; font-weight: bold;">
						￥{{parseInt(details.price)}}
					</view>
					<view style="font-size: 22rpx;color: red;margin: 20rpx 0;line-height: 0;">
						最多可用{{parseInt(details.price*0.3/0.05)}}米粒抵扣{{details.price*0.3}}元
					</view>

					<view class="opction">
						<u-parse :content="details.detail_text"></u-parse>

					</view>
					<template v-if="typeState === 3">
						<image class="tab" src="http://qiniu.suboshimuying.cn/static/details/Group.png" mode=""></image>
						<text style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">市场价值:¥{{ details.order_price }}</text>
					</template>
				</view>
				<template v-if="typeState === 1">
					<view style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">
						<text v-if="details.mb_price">某宝参考价:¥{{ details.mb_price }}</text>
						&nbsp;&nbsp;
						<text v-if="details.md_price">某东参考价:¥{{ details.md_price }}</text>
					</view>
				</template>
			</view>

			<template v-if="typeState === 3">
				<view class="areaBox card">
					<view>门店地址</view>
					<view class="areaBox-area">{{ details.adress_det }}</view>
				</view>
			</template>

			<template v-if="typeState === 2">
				<view class="card">
					<view class="areaBox" style="margin-bottom: 15rpx">
						<view>上门服务</view>
						<view class="areaBox-area">{{ details.call_pel }}</view>
					</view>
					<view class="areaBox" style="padding-top: 15rpx; border-top: 1rpx solid #f4f4f4">
						<view>到店服务</view>
						<view class="areaBox-area">{{ details.adress_det }}</view>
					</view>
				</view>
			</template>

		</view>

		<!-- 底部按钮 -->
		<view class="fixedBox">
			<!-- <view class="fixedBox-left" @click="navigateTo" data-url="/pages/cart/cart">
				<image src="../../static/images/index/cart.png" mode=""></image>
				<view class="gwc-text">购物车</view>
			</view> -->
			<view class="fixedBox-right">
				<!-- <view class="fixedBox-right-left" @click="fixdBtnClick(true)">加入购物车</view> -->
				<view class="fixedBox-right-right" @click="goBuy">立即购买</view>
			</view>
		</view>
		<!-- 下单弹出层 -->
		<PlacePopup :details="details" @popupBtnCallback="popupCallback2" :btnType="btnType"
			@popupClose="popupShow2 = false" :showFlag="popupShow2" :type="typeState" />

		<MessageBox :showFlag="popupShow3" title="您当前还没填写预产期哦~" text="1"
			@popupClose=";(popupShow3 = false), (showDueDateState = false)" @MesBoxCallback="confirmFillOutHandler"
			:isBtn2="false">
			<template #selectTimeSlot>
				<!-- <view class="selectTimeBox" @click="showDueDateState = true">{{ dueData==='点击选择预产期' ? '点击选择预产期': `${dueData.split('-')[0]}年${dueData.split('-')[1]}月${dueData.split('-')[2]}日` }}</view> -->
				<view class="selectTimeBox" @click="showDueDateState = true">{{ dueData }}</view>
			</template>
		</MessageBox>

		<u-datetime-picker :show="showDueDateState" v-model="dueDateValue" mode="date"
			@cancel="showDueDateState = false" @confirm="confirmDueDateHandler"></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import PlacePopup from '@/components/PlacePopup/PlacePopup.vue'
	import VideoImg from '@/components/VideoImg/VideoImg.vue'
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	export default {
		data() {
			return {
				items: [{
						value: 'USA',
						name: '美国'
					},
					{
						value: 'CHN',
						name: '中国',
						checked: 'true'
					},
					{
						value: 'BRA',
						name: '巴西'
					},
					{
						value: 'JPN',
						name: '日本'
					},
					{
						value: 'ENG',
						name: '英国'
					},
					{
						value: 'FRA',
						name: '法国'
					}
				],
				videoContext: '',
				sex: [{
					text: '图片',
					value: 0
				}, {
					text: '视频',
					value: 1
				}],
				radio: 0,
				typeState: 0, //专区状态
				id: null, //商品ID
				details: {}, //商品详情
				commentData: {}, //评论
				popupShow2: false,
				popupShow3: false,
				btnType: true,
				messGoods: [], //评论
				shareFlag: false,
				imgVideoStyle: 'detail',
				isHideTabbar: false, // tabbar 状态
				swiperAutoPlayState: true, // swiper 是否自动轮播
				swiperIndex: 0,
				dueDateValue: Number(new Date()),
				showDueDateState: false,
				dueData: '请点击这里选择预产期',
				imgs: [],
				goods_image: [
					'https://stormsend1.djicdn.com/tpc/uploads/carousel/image/9519357cc86aa796c687c8f323ea3325@ultra.jpg',
					'https://stormsend1.djicdn.com/tpc/uploads/carousel/image/9519357cc86aa796c687c8f323ea3325@ultra.jpg'
				]
			}
		},
		components: {
			PlacePopup,
			VideoImg
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myvideo', this)

		},

		async onLoad(option) {
			let res = await this.$api.getcategoods({})
			console.log(res);
			// 区分分享进入和正常进入
			if (option.fxuserId) {
				// 区分自己进入和别人进入
				this.shareFlag = true
				if (option.fxuserId != uni.getStorageSync('userId')) {
					// uni.setStorage()
					uni.setStorageSync('fxuserId', option.fxuserId)
					uni.setStorageSync('pid', option.fxuserId)
					if (!uni.getStorageSync('token')) uni.navigateTo({
						url: '/subPages/login/login'
					})
				}
			} else {
				this.shareFlag = false
			}
			// 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
			this.typeState = Number(option.type)
			this.id = option.id
			console.log(option)
			this.getGoodDetails(option.id)
		},
		onShow() {
			//商品详情
			this.getMessGoods() //获取评论
		},
		// 分享好友
		onShareAppMessage(res) {
			return {
				//type 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
				// id:商品ID
				title: '米夸商城', // 标题
				path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
				imageUrl: this.details.thum_image, // 分享图
				desc: this.details.name
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '米夸商城', // 标题
				path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
				imageUrl: this.details.thum_image // 分享图
			}
		},

		methods: {
			valChange(a, e) {
				console.log(a, e)
			},
			changeValue(e) {
				console.log(e);

			},

			// 购买
			goBuy() {
				uni.navigateTo({
					url: '/subPages/order1/order?flag=true&id=' + this.details.id
				})
			},

			navigateTo(e) {
				console.log(e);
				// uni.navigateTo({
				// 	url: e.curren
				// })
			},

			screenChange(e) {
				this.videoContext.requestFullScreen()
				let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
				console.log(e, "全屏");
			},
			changeSwiperHandler(e) {
				console.log(e, 'swiper')
			},
			fullscreenchangeHandler() {
				this.$nextTick(() => {
					this.isHideTabbar = !this.isHideTabbar
				})
			},
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 导航栏点击
			leftClick() {
				if (this.shareFlag) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			// 立即购买-加入购物车 回调
			popupCallback2(number) {
				// number:数量
				console.log(number)
				if (this.btnType) {
					// 下单事件
					uni.navigateTo({
						url: `/subPages/order/order?flag=${true}&type=${this.typeState}&id=${this.id}&num=${number}`
					})
					this.popupShow2 = false;
				} else {
					// 加入购物车事件
					this.addCart(number)
				}
			},
			// 立即购买点击
			async fixdBtnClick(type) {
				console.log(this.id);
				let res = await this.$api.addCart({
					goods_id: this.id * 1,
					num: 1,
					code: 200,
					msg: '添加成功'
				})
				uni.showToast({
					title: res.msg,
				})
			},
			// 确认选择预产期
			confirmDueDateHandler(e) {
				this.dueData = dayjs(e.value).format('YYYY-MM-DD')
				this.showDueDateState = false
			},
			// 确认填报预产期
			async confirmFillOutHandler() {
				this.showDueDateState = false
				if (this.dueData === '请点击这里选择预产期') return uni.showToast({
					title: '请先选择预产时间',
					icon: 'none'
				})
				const targetDate = dayjs(this.dueData)
				const today = dayjs()
				const diffInDays = targetDate.diff(today, 'day')
				console.log(diffInDays) // 输出结果为数字，表示距离今天还有多少天
				if (diffInDays > 310) return uni.showToast({
					title: '不可选择大于十个月以上的时间哦~',
					icon: 'none'
				})
				try {
					await this.$api.expectDate({
						expect_time: this.dueData
					})
					this.popupShow3 = false
					this.popupShow2 = true
					uni.showToast({
						title: '录入成功~',
						icon: 'none'
					})
				} catch (error) {
					console.log(error, '录入预产期失败')
					this.popupShow3 = false
				}
			},
			// 加入购物车
			async addCart(num) {
				let {
					code,
					msg
				} = await this.$api.addCart({
					goods_id: this.id,
					num
				})
				this.$u.toast(msg)
				if (code === 1) {
					setTimeout(() => {
						this.popupShow2 = false
					}, 1500)
				}
			},
			// 商品详情
			async getGoodDetails(id) {
				console.log(id);
				let res = await this.$api.miligoodsDetail({
					id,
				})
				this.imgs = [res.data.goods_image]
				this.details = res.data
			},
			// 获取评论
			async getMessGoods() {
				let res = await this.$api.getMessGoods({
					id: this.id,
					page: 1,
					total: 5
				})
				this.messGoods = res.data.data
			}
		}
	}
</script>

<style>
	.tab {
		position: absolute;
		bottom: 80rpx;
		z-index: 3;
		left: 50%;
		transform: translateX(-50%);
	}

	.count {
		position: absolute;
		left: 20rpx;
		background-color: #3333333d;
		border-radius: 6rpx;
		top: 60rpx;
		font-size: 22rpx;
		line-height: 50rpx;
		color: #fff;
		padding: 0 15rpx;
		z-index: 4;
	}

	page {
		box-sizing: border-box;
		padding-bottom: 230rpx;
	}

	button {
		background-color: #fff;
	}

	button::after {
		border: none;
	}

	.button-hover {
		background: #fff;
	}
</style>

<style lang="scss" scoped>
	.cont {
		.box {
			border-radius: 10rpx;
			border: 2rpx solid #eee;
			margin-top: 40rpx;
			padding: 20rpx;


			.box-item {
				.right {
					margin-left: 40rpx;
					flex: 1
				}

				display: flex;

				line-height: 40rpx;

				.name {
					font-size: 24rpx;
					font-weight: 800;
				}

				.price {
					font-size: 24rpx;
				}

				.content {
					font-size: 24rpx;
				}
			}
		}

	}

	.opction {
		padding-left: 20rpx;

		.li {
			position: relative;
			font-size: 24rpx;
			color: #231b1bba;

			&:before {
				position: absolute;
				content: '';
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #231b1b7a;
				left: 0;
				top: 50%;
				transform: translate(-210%, -50%);
			}
		}
	}

	.swiper-item {
		display: block;
		line-height: 300rpx;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.swiper {
		height: 750rpx;
	}

	.swiperDotBox {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-top: -30rpx;
		z-index: 10099 !important;

		.swiperDot {
			margin: 0 6rpx;
			z-index: 10099 !important;
			width: 36rpx;
			height: 10rpx;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 10rpx;
		}
	}

	.curDot {
		background-color: #fff !important;
	}

	.cardList {
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.priceBox {
		&-price {
			// height: 64rpx;
			line-height: 64rpx;
			// color: $priceText;
			font-size: 52rpx;
			font-weight: 500;
			font-family: 'PingFang SC';

			.tab {
				vertical-align: middle;
				width: 106rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}

		&-title {
			color: rgba(0, 0, 0, 0.9);
			font-size: 30rpx;
			font-weight: 500;
			line-height: 44rpx;
			letter-spacing: 0.6rpx;
		}
	}

	.areaBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(0, 0, 0, 0.4);
		font-size: 26rpx;
		font-weight: 400;

		&-area {
			margin-left: 16rpx;
			flex: 1;
			color: #000;
		}
	}

	.commentCard {
		&-title {
			box-sizing: border-box;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #f4f4f4;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(0, 0, 0, 0.8);
			font-size: 28rpx;
			font-weight: 500;
			text-align: left;

			.arrowright {
				margin-left: 10rpx;
				vertical-align: middle;
				width: 24rpx;
				height: 24rpx;
			}
		}

		&-center {
			margin-top: 12rpx;

			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: rgba(0, 0, 0, 0.55);
				font-size: 26rpx;
				font-weight: 400;

				.picture {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.userRight {
					flex: 1;
				}
			}

			.comment {
				margin-top: 16rpx;
				// height: 80rpx;
			}
		}
	}

	.commentCard-below {
		margin-top: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 210rpx;

		image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 16rpx;
		}
	}

	// 底部按钮
	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 10px 50px 100px #150a0a;
		// height: 188rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 32rpx 28rpx;

		&-left {
			margin-right: 24rpx;
			color: rgba(0, 0, 0, 0.8);
			font-size: 22rpx;
			font-weight: 400;
			text-align: center;
			margin-right: 30rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}

			.gwc-text {
				font-size: 20rpx;
			}
		}

		&-right {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 600rpx;
			opacity: 1;
			// background: rgb(0, 0, 0);
			text-align: center;
			display: flex;
			justify-content: space-around;

			&-left {
				width: 50%;
			}

			&-right {
				width: 80%;
				background-color: $uni-color-primary;
				border-radius: 50rpx;

			}
		}
	}

	.selectTimeBox {
		margin: 60rpx auto 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 700;
		color: rgb(249, 106, 106);
		border: 1rpx solid rgba(0, 0, 0, 0.2);
		padding: 20rpx;
	}

	.thum_image {
		width: 100%;
		margin-top: 12rpx;
	}
</style>